{% extends "base_teacher.html" %}
{% block content %}
    <div class="page-header">
        <h1><span class="text-light-gray">问题生成 / </span>填空</h1>
    </div> <!-- / .page-header -->

    <div class="row">
        <div class="col-sm-12">
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">操作</span>
                </div>
                <form id="org" action="/completion/file_completion_generation/" enctype="multipart/form-data"
                      method="post">
                    {% csrf_token %}
                    <table class="table" id="inputs-table">
                        <thead>

                        </thead>
                        <tbody>
                        <tr>
                            <td>
                                导入文件
                            </td>
                            <td>
                                <script>
                                    init.push(function () {
                                        $('#styled-finputs-example').pixelFileInput({placeholder: '请选择文件'});
                                    })
                                </script>
                                <!-- / Javascript -->
                                <div class="panel">
                                    <div class="panel-body">
                                        <input type="file" id="styled-finputs-example" name="file"
                                               onchange="handle(this.files)">
                                    </div>
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <td>
                                内容预览
                            </td>
                            <td>
                                <textarea class="form-control" id="program" rows="3"></textarea>
                            </td>
                        </tr>
                        <script type="text/javascript">
                            var name1;

                            function handle(files) {
                                var area = document.getElementById("program");
                                if (files.length) {
                                    var file = files[0];
                                    // alert(file.name);
                                    var reader = new FileReader();
                                    // alert(reader);
                                    if (/text\/\w+/.test(file.type)) {
                                        reader.onload = function () {
                                            text = this.result + "\r\n";
                                            area.value = this.result + "\r\n";
                                        }
                                        reader.readAsText(file);
                                    }
                                }
                            }
                        </script>
                        <tr>
                            <td>
                                重点句数
                            </td>
                            <td>
                                <input type="number" name="num" id="num" min="1" max="20" step="1" value="6">
                            </td>
                        </tr>
                        <tr>
                            <td>确认</td>
                            <td>
                                <button type="submit" onclick="return showWaiting()" class="btn btn-warning btn-rounded">点击生成
                                </button> &nbsp;&nbsp;
                            </td>
                        </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <script>
                init.push(function () {
                    $('#jq-datatables-example').dataTable();
                    $('#jq-datatables-example_wrapper .table-caption').text('生成列表');
                    $('.table-footer ').append("<button class='btn btn-success btn-rounded' onclick='saveData()' style='float:right;margin-right:30px;' >&nbsp&nbsp 保存到题库&nbsp&nbsp</button> ");
                    $('#jq-datatables-example_wrapper .dataTables_filter input').attr('placeholder', '搜索...');
                });

                function saveData() {
                    var data = "";
                    var a = document.getElementsByName("checkQ");
                    for (var i=0; i<a.length;i++){
                        if(a[i].checked){
                            data = data+a[i].value+"/";
                        }
                    }
                    var post_data = {"qg": data};
                    $.ajax({
                        url: '/completion/question_save/',
                        type: 'POST',
                        dataType: "JSON",
                        data: post_data,
                        traditional:true,
                        success: function(response) {
                            if (response['status']==100){
                                alert("保存成功！");
                                location.href = '/completion/show_completion_homepage/';
                            }
                            else {
                                alert("异常！");
                                location.href = '/completion/show_completion_homepage/';
                            }
                            }

                        })
                }
            </script>
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title">问题生成系统&And;</span>
                </div>
                <div class="panel-body">
                    <div class="table-primary">
                        <table class="table table-striped table-bordered" id="jq-datatables-example">
                            <thead>
                            <tr>
                                <th>序号</th>
                                <th>问题</th>
                                <th>答案</th>
                                <th>是否存入题库</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for exercice in mayanswer %}
                                <tr class="odd gradeX">
                                    <td>{{ forloop.counter }}</td>
                                    <td>{{ exercice.question }}</td>
                                    <td class="center">{{ exercice.answer }}</td>
                                    <td>
                                        <div class="checkbox" style="margin: 0;">
                                            <label>
                                                <input type="checkbox" name="checkQ" value="{{ exercice.org }}|{{ exercice.question }}|{{ exercice.answer }}" class="px">
                                                <span class="lbl">选择</span>
                                            </label>
                                        </div>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="row">
        <div class="col-sm-6">
        </div>
    </div>
    </div>
    <div id="main-menu-bg"></div>
    </div>
    <script type="text/javascript"> window.jQuery || document.write('<script src="/static/assets/javascripts/jquery.min.js">' + "<" + "/script>"); </script>
    <script type="text/javascript"> window.jQuery || document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">' + "<" + "/script>"); </script>
    <script src="/static/js/bootstrap.min.js"></script>
    <script src="/static/js/landerapp.min.js"></script>
    <script type="text/javascript">
        init.push(function () {
            // Javascript code here
        })
        window.LanderApp.start(init);
    </script>
    <script>
        function closeWaiting() {
            var bgDiv = document.getElementById("bgDiv");
            var msgDiv = document.getElementById("msgDiv");
            //移除背景遮罩层div
            if (bgDiv != null) {
                document.body.removeChild(bgDiv);
            }
            //移除中间信息提示层div
            if (msgDiv != null) {
                document.body.removeChild(msgDiv);
            }
        }

        //显示等待窗口
        function showWaiting() {
            if($('#styled-finputs-example').val() == ""){
                alert("请先选择文件！");
                return false;
            }
            var msgw, msgh, bordercolor;
            msgw = 300; //提示窗口的宽度
            msgh = 120; //提示窗口的高度
            bordercolor = "#336699"; //提示窗口的边框颜色
            titlecolor = "#99CCFF"; //提示窗口的标题颜色

            var sWidth, sHeight;
            sWidth = document.body.clientWidth;
            sHeight = document.body.clientHeight + 10;

            //背景遮罩层div
            var bgObj = document.createElement("div");
            bgObj.setAttribute('id', 'bgDiv');
            bgObj.style.position = "absolute";
            bgObj.style.top = "0px";
            bgObj.style.background = "#888";
            bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
            bgObj.style.opacity = "0.6";
            bgObj.style.left = "0px";
            bgObj.style.width = sWidth + "px";
            bgObj.style.height = sHeight + "px";
            document.body.appendChild(bgObj);

            //信息提示层div
            var msgObj = document.createElement("div");
            msgObj.setAttribute("id", "msgDiv");
            msgObj.setAttribute("align", "center");
            msgObj.style.position = "absolute";
            msgObj.style.background = "white";
            msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
            msgObj.style.border = "1px solid " + bordercolor;
            msgObj.style.width = msgw + "px";
            msgObj.style.height = msgh + "px";
            msgObj.style.top = (document.documentElement.scrollTop + (sHeight - msgh) / 2) + "px";
            msgObj.style.left = (sWidth - msgw) / 2 + "px";
            document.body.appendChild(msgObj);
            //标题栏
            var title = document.createElement("h4");
            title.setAttribute("id", "msgTitle");
            title.setAttribute("align", "left");
            title.style.margin = "0px";
            title.style.padding = "2px";
            title.style.background = bordercolor;
            title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
            title.style.opacity = "0.75";
            title.style.border = "1px solid " + bordercolor;
            title.style.height = "18px";
            title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
            title.style.color = "white";
            title.innerHTML = "正在加载中，请稍候......";
            document.getElementById("msgDiv").appendChild(title);

            //中间等待图标
            var img = document.createElement("img");
            img.style.margin = "10px 0px 10px 0px";
            img.style.width = "48px";
            img.style.height = "48px";
            img.setAttribute("src", "/static/img/waitting.gif");
            document.getElementById("msgDiv").appendChild(img);
        }
    </script>
{% endblock content %}